<template>
	<el-form :inline="true" :model="form" class="demo-form-inline">
		<el-form-item label="target">
			<el-input v-model="form.target"/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="get(form.target)">Query</el-button>
		</el-form-item>
	</el-form>
	<div>{{ val.hello }}</div>
	<div>{{ val.mysql }}</div>
	<div>{{ val.redis }}</div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";
import request from "@/utils/request";
import v from 'voca';

const val = reactive({
	hello: v.sprintf("this is number: %d", 5),
	mysql: '456',
	redis: '345'
})

v.sprintf("this is number: %d", 5)

const form = reactive({
	target: '',
})

const get = (target: string) => {
	const helloUrl = v.sprintf("/%s/hello", target);
	const redisUrl = v.sprintf("/%s/redis", target);
	const mysqlUrl = v.sprintf("/%s/mysql", target);
	request.post(helloUrl).then((r) => val.hello = r);
	request.post(redisUrl).then((r) => val.redis = r);
	request.post(mysqlUrl).then((r) => val.mysql = r);
}

</script>

<style scoped>

</style>